import React, { Component } from 'react';
import {
    WhiteSpace,
    Flex
} from 'antd-mobile';
import { connect } from 'dva';
import MyScroll from '../../components/MyScroll/MyScroll';
import { routerRedux } from 'dva/router';
import { recommend_all } from './recommend.less';
import Img from '../../components/Img/Img';
import NavTopBar from '../../components/NavTopBar/NavTopBar';

class Recommends extends Component {
    constructor(props) {
        super(props);

    }



    componentDidMount() {

    }







    render() {
         const { recommends, dispatch } = this.props;
         const { list } = recommends;

        return (
            <Flex style={{
                height:"100%",
                position:'relative',
            }} direction="column"
            >

                <NavTopBar dispatch={dispatch} title="为你推荐"></NavTopBar>
                <MyScroll
                   // getAlloyTouch={ this.getAlloyTouch }
                >
                    <Flex direction="row" wrap="wrap" className={recommend_all}>
                        {
                            list.map((v,i,a)=>{
                                return (
                                    <div onClick={()=>{

                                        dispatch(routerRedux.push(`/goodsDetail/${v.specId}`))

                                    }} style={{  width: "50%" }} key={i}>
                                        <div className="item"  style={ i%2==0 ? { marginRight:"0.05rem", minHeight: '5.7rem' } : { marginLeft:"0.05rem", minHeight: '5.7rem' } }>
                                            <div style={{width: '100%', height: '3.8rem', overflow: 'hidden'}}>
                                                <Img src={v.image } style={{ width:"100%", height:'auto' }} ></Img>
                                            </div>
                                            <div className="name text-two-eli">{ v.name }</div>
                                            <div className="price">￥{v.storePrice}</div>
                                            <div className="evaluate">
                                                <span style={{ marginRight:"0.2rem" }}>{v.evaluatePersonNum }条评价</span>
                                                <span>销量：{ v.salenum }</span>
                                            </div>
                                        </div>
                                    </div>
                                )
                            })
                        }

                    </Flex>
                </MyScroll>

            </Flex>

        );
    }
}

export default connect(({ recommends }) => ({ recommends }))(Recommends);
